<template>
	<view class="player">
		<!-- 歌曲信息 -->
		<text class="info">{{nowMusic.title+" - "+nowMusic.author}}</text>
		<!-- 进度条 -->
		<u-line-progress :show-percent="false" :percent="percent" height="10"></u-line-progress>
		<view class="player-buttons">
			<!-- 上一首 -->
			<u-icon name="rewind-left" :size="buttonSize" color="#686868" @click="next(0)"></u-icon>
			<!-- 播放按钮 -->
			<u-icon style="margin: 0 40rpx;" :name="nowPause?'pause':'play-right'" :size="buttonSize" color="#686868"
				@click="cPause"></u-icon>
			<!-- 下一首 -->	
			<u-icon name="rewind-right" :size="buttonSize" color="#686868" @click="next(1)"></u-icon>
		</view>
		<!-- 打开侧边音乐列表 -->
		<u-icon class="list" size="50" color="#686868" name="list" @click="music"></u-icon>
	</view>
</template>

<script>
	export default {
		props: {
			nowMusic: {
				type: Object
			},
			nowIndex:{
				type:Number
			},
			length:{
				type:Number
			}
		},
		name: "music-player",
		data() {
			return {
				percent: 0,
				nowPause: false,
				buttonSize: 60,
				player: {},
				progressInter: {
					type: 0
				},
				duration: 0,
				currentTime: 0
			};
		},
		created() {
			this.setPlayer(false)
		},
		watch: {
			nowMusic(n) {
				this.changeMusic()
			}
		},
		methods: {
			next(v){
				var newIndex = 0
				if(v==0){
					//上一首
					if(this.nowIndex - 1 >= 0){
						newIndex = this.nowIndex -1
						this.$emit("changeIndex",newIndex)
					}
				}else{
					//下一首
					if(this.nowIndex + 1 < this.length){
						newIndex = this.nowIndex + 1
						this.$emit("changeIndex",newIndex)
					}
				}
			},
			cPause() {
				if (this.player != {}) {
					if (!this.nowPause) {
						this.player.play()
					} else {
						this.player.pause()
					}
					this.nowPause = !this.nowPause
				}
			},
			music() {
				this.$emit("openList")
			},
			updateProgress(nowPercent) {
				this.percent = nowPercent
			},
			setPlayer(run) {
				//新建播放器实例
				this.player = uni.createInnerAudioContext()
				this.player.src = this.nowMusic.url	//设置播放地址
				this.player.onCanplay(() => {	//获取歌曲总长度
					this.duration = this.player.duration
				})
				if(run) this.player.play()	//开始播放
				//设置定时器不断获取当前长度并更新进度条
				this.progressInter = setInterval(() => {
					this.currentTime = this.player.currentTime
					var pro = this.currentTime / this.duration
					this.updateProgress(pro * 100)
					//当歌曲结束时自动开始下一首
					if(this.currentTime/this.duration==1){
						this.next(1)
					}
				}, 1000)
				this.nowPause = run
			},
			changeMusic() {
				//清除定时器
				clearInterval(this.progressInter)
				this.percent = 0	//重置进度条
				this.player.stop()	//停止播放
				this.player.destroy()	//销毁实例
				//重新设置新的播放器实例
				this.setPlayer(true)
			}
		}
	}
</script>

<style lang="scss">
	.player {
		box-shadow: 10rpx 10rpx 10rpx $u-bg-color;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
		position: relative;

		.list {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}

		.info {
			font-size: 34rpx;
			color: $my-text-color1;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			margin-bottom: 20rpx;
		}

		.player-buttons {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-top: 20rpx;
			//border: 2rpx red solid;
		}
	}
</style>
